<template>
    <div id="app" class="personal-page">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">个人资料</div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <div class="gap"></div>
        <section>
            <div>
                修改头像
            </div>
            <div id="filePicker">
                <img v-if="info.head_img" :src="info.head_img" id="head-img" />
                <img v-else src="../assets/icon-un-login.png" id="head-img" />
                <i></i>
            </div>
        </section>
        <div class="gap"></div>
        <section class="link" @click="popup_sex = true">
            <div>
                修改性别
            </div>
            
            <span class="text">
                {{info.sex == 0 ? '请选择' : (info.sex == 1 ? '男' : '女')}}
            </span>
        </section>
        <div class="gap"></div>
        <section>
            <div>
                修改昵称
            </div>
            <div class="nickname">
                <input type="text" v-model.trim="info.name" @blur="upNickName" ref="nickname">
            </div>
        </section>
        <div class="gap"></div>
        <section @click="goUpdatePW">
            <a class="link-box">
                <div>修改密码</div>
            </a>
        </section>


        <!-- 性别弹窗 -->
        <ui-popup :status="popup_sex" @close="popup_sex = false" >
            <div class="popup-common model-popup">
                <p class="title">请选择性别</p>
                <div class="model-box">
                    <a href="javascript:;" @click="changeSex(1)" class="model-item" :class="{'active':info.sex == 1}">
                        <p>男</p>
                    </a>
                    <a href="javascript:;" @click="changeSex(2)" class="model-item" :class="{'active':info.sex == 2}">
                        <p>女</p>
                    </a>
                </div>
                <a href="javascript:;" class="close-btn" @click="popup_sex = false"></a>
            </div>
        </ui-popup>
    </div>
</template>

<script>
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";
import UIPopup from "../components/popup.vue";
export default {
    name: "personal_data",
    components: {
        [scrollFixed.name]: scrollFixed,
        [UIPopup.name]: UIPopup,
        [pageBar.name]: pageBar
    },
    data() {
        return {
            loading:false,
            popup_sex:false,
            info: {
                head_img: "",
                name: "",
                old_name:"",
                sex:0
            }
        };
    },
    mounted() {
        let _this = this;
        let info = window.localStorage.getItem("member_info");

        if (info) {
            info = JSON.parse(info);
            this.info = info;
            _this.info.name = info.nickname;
            this.info.old_name = info.nickname;
            if(info.head_img) {
                window.document.querySelector("#head-img").setAttribute("src", info.head_img);
            }

            // 修改头像
            window.upload = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // 文件接收服务端。
                server: this.$config.api + "?ct=member_center&ac=edit_head_img",
                pick: "#filePicker",
                // 只允许选择图片文件。
                accept: {
                    capture: "",
                    title: "Images",
                    extensions: "gif,jpg,jpeg,bmp,png",
                    mimeTypes: "image/*"
                },
                chunked: true,
                chunkSize: 1 * 1024 * 1024,
                formData: {
                    file: "file",
                    "_token": localStorage.getItem("token"),
                }
            });

            function removeInputCapture(){
                let pick = document.querySelector('#filePicker input[type=file]');
                if(!pick){
                    setTimeout(()=>{
                        removeInputCapture();
                    },300)
                    return false;
                }

                pick.removeAttribute('capture');
            }
            removeInputCapture();

            // 图片不能大于2M
            upload.on("beforeFileQueued", file => {
                if (file.size > 2 * 1024 * 1024) {
                    _this.$toast("图片不能超过2M");
                    return false;
                }

                file.guid = WebUploader.Base.guid();
            });

            upload.on("uploadBeforeSend", (object, data, headers) => {
                headers["X-Requested-With"] = "XMLHttpRequest"
                data.guid = object.file.guid;
            });

            // 上传成功
            upload.on("uploadSuccess", (file, response) => {
                var res = JSON.parse(response._raw);
                window.document.querySelector("#head-img").setAttribute("src", res.data.filelink);

                let memberInfo = JSON.parse(localStorage.getItem("member_info"));
                memberInfo.head_img = res.data.filelink
                localStorage.setItem("member_info", JSON.stringify(memberInfo))
            });
        }
    },
    methods: { 
        goUpdatePW() {
            location.href = this.$config.pages.updatePwd;
        },
        upNickName() {
            if(this.info.name === this.info.old_name) return;
            let _data = {
                name: this.info.name
            };
            this.$http.post("?ct=member_center&ac=edit_nickname", _data).then(res => {
                let data = res.data;
                if (data.code !== 0) {
                    this.$toast(data.msg);
                } else {
                    let memberInfo = JSON.parse(localStorage.getItem("member_info"));
                    memberInfo.nickname = this.info.name;
                    localStorage.setItem("member_info", JSON.stringify(memberInfo))
                    // this.$refs.nickname.blur();
                }
            });
        },
        changeSex(val) {
            if(this.info.sex == val || val == 0 || this.loading) return false;
            this.loading = true;
            this.info.sex = val;
            this.$http.post('?ct=member_center&ac=edit_sex',{sex:this.info.sex}).then(response=>{
                let {data} = response;
                    if(data.code == 0){
                        this.popup_sex = false;
                        this.$toast('修改成功');
                        let memberInfo = JSON.parse(localStorage.getItem("member_info"));
                        memberInfo.sex = this.info.sex;
                        localStorage.setItem("member_info", JSON.stringify(memberInfo))
                    }else{
                        this.$toast(data.msg);
                    }
            }).catch(e=>{
                this.$toast('获取评论数据失败');
            }).finally(()=>{
                this.loading = false;
            })
        }
    }
};
</script>

<style lang="less">
.personal-page {
    display: flex;
    flex-direction: column;
    background-color: #fff;

    #filePicker {
        input {
            display: none;
        }
    }

    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .gap {
        height: 20px;
        background-color: #f6f6f6;
    }

    section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        &.link {
            position: relative;
            padding-right:55px;

            &::after {
                content:'';
                position:absolute;
                top:50%;
                right:30px;
                transform: translateY(-50%);
                width: 9px;
                height: 15px;
                margin-left: 30px;
                background-image: url("../assets/icon-item-link.png");
                background-size: 100% 100%;
            }
        }
        & > div:first-child,
        & > .link-box > div {
            color: #000;
            font-size: 32px;
        }
        div:last-child {
            & > div {
                align-items: center;
                display: flex;
            }
            &.link-box {
                width: 100%;
            }

            img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid red;
            }
            i {
                width: 9px;
                height: 15px;
                margin-left: 30px;
                background-image: url("../assets/icon-item-link.png");
                background-size: 100% 100%;
            }
        }
        .text {
            font-size: 32px;
            text-align: right;
            color: #666; 
        }
        .nickname {
            input {
                border: none;
                font-size: 32px;
                text-align: right;
                color: #666;
                caret-color: red;
            }
        }
    }
}
.popup-common {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    z-index: 999;
    border-radius: 10px;
}

.model-popup {
    width: 600px;
    .title {
        padding:0 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        height:111px;
        border-bottom:1px solid #eee;
        font-size: 36px;
        color: #282828;
        font-weight: bold;
        text-align: center;
    }
    .model-box {
        padding:0 40px;
    }
    .model-item {
        position: relative;
        height:85px;
        display: flex;
        justify-content: center;
        align-items: center;
        p {
            font-size: 32px;
            color: #666;
        }

        & + .model-item {
            border-top: 1px solid #eee;
        }
    }

    .model-item.active {
        p {
            color: #e64a19
        }
    }

    .close-btn {
        position: absolute;
        bottom: -100px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        width: 60px;
        height: 60px;
        background-image: url("../assets/icon-home_close.png");
        background-size: 100% 100%;
    }

}
</style>


